<!DOCTYPE html>
<html lang = "en" xmlns:th = "http://www.thymeleaf.org"
      xmlns:sec = "http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>管理后台</title>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link th:href="@{/static/css/semantic.css}" rel="stylesheet" type="text/css">-->
    <script th:src = "@{/static/js/jquery-3.1.1.min.js}"></script>
    <script th:src = "@{/static/js/template-web.js}"></script>
    <link th:href = "@{/static/css/qinstyle.css}" rel = "stylesheet">
    <link th:href = "@{/static/layui-v2.5.5/css/layui.css}" rel = "stylesheet" type = "text/css"/>
    <script type = "text/javascript" th:src = "@{/static/layui-v2.5.5/layui.js}"></script>
    <script type = "text/javascript" th:src = "@{/static/js/common.js}"></script>
    <script th:src = "@{/static/js/semantic.min.js}"></script>
    <!--semantic-ui 必须用这个 用路径下的不行 会缺失样式-->
    <link type = "text/css" href = "https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet">
    <script>
        var content = [{title:"人体的奥秘"},{title:"如何学好英语"},{title:"大学生创新创业指导"},{title:"婚恋指导"},{title:"电影的艺术"},{title:"戏剧欣赏"},{title:"中药理学"},{title:"网页设计"},{title:"计算机网络导论"},{title:"化妆品学"},{title:"化学原理"},{title:"大学生计算机基础课程"},{title:"人工智能概论"},{title:"音乐鉴赏"},{title:"牛顿力学解析"},{title:"天文学"},{title:"药品的解析"},{title:"深入JVM"},{title:"爬虫原理"},{title:"浮力概述"},{title:"深入分布式"},{title:"Shiro与spring security"},{title:"zookeeper"},{title:"有趣的python"},{title:"人体系统论"},{title:"药草认识大全"},{title:"做一个健康的程序员"},{title:"脱发原理"},{title:"引力的奥秘"},// etc
        ];

        $(function(){
            //监听搜索框
            $("#search").mouseover(function(){
                //alert("sas");
                $("#search").search({
                    source:content,
                });
            });
            //var name = document.getElementById("user").innerHTML;  这个语句有问题 如果没有该id值 直接报错。而不是返回空
            //console.log(name);
            load(1,"");
        });

        //使用$.ajax()发送异步请求
        function load(page,tCase){
            var fnname = getFnName(arguments.callee,4);
            //console.log(fnname); //打印出来了
            $.ajax({
                url:"/user/getUsers", // 请求路径
                type:"POST", //请求方式
                data:{"page":page,"limit":8}, //默认 每页8条数据。
                dataType:"json",//data:{"username":"jack","age":23}, //  方式二 推荐使用这种方式
                success:function(data){  //这里的data可以随便命名 不过还是有点规则好一些
                    fill(fnname,data);
                },//响应成功后的回调函数
                error:function(){
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
                //dataType:"application/json"//设置接受到的响应数据的格式
            });
        };

        //填充用户课程数据
        function fillCourses(ftname,data,backPage){
            var back = " <a class = \"item\" href=\"#\" onclick=\"load" + "('" + backPage + "','" + "'" + ")\"><i class = \"icon reply\"></i>返回</a>\n" + "            <span style = \"text-align: center\"><h3>学生信息如下</h3></span>";
            $("#back").html(back);
            var tHead = "<tr>\n" + "                <th>课程号</th>\n" + "                <th>所属学院</th>\n" + "                <th>课程名称</th>\n" + "                <th>任课老师</th>\n" + "                <th>课程类型</th>\n" + "                <th>学分</th>\n" + "                <th>剩余人数</th>\n" + "                <th>上课时间</th>\n" + "                <th>操作</th>\n" + "            </tr>";
            $("#thead").html(tHead);
            $("#pageNum").html("");
            $("#tbody").html("");
            //1.1展示总页码以及总记录数
            $("#totalPage").html(data.totalPage);
            $("#totalCount").html(data.totalCount);
            //console.log(ttCase);
            console.log("ftname:" + ftname);
            var start;
            var end;
            //要显示5个页码
            if (data.totalPage < 5){
                //不够10页
                start = 1;
                end = data.totalPage;
            }else{
                //实现前二后二效果
                start = data.currentPage - 2;
                end = data.currentPage + 2;
                if (start < 1){
                    start = 1;
                    end = start + 4;
                }

                if (end > data.totalPage){
                    end = data.totalPage;
                    start = end - 4;
                }
            }
            //1.2 展示分页页码 onclick="selectOrCancel(' + course.courseId + ',' + true + ')">' +
            var lis = "";
            //var firstPage = template("firstHref",{
            //    ftname:ftname,ttCase:ttCase,name:name,
            //}); //展示首页
            var firstPage = "<a class=\"item\" onclick=\"" + ftname + "(" + 1 + ",'" + data.tCase + "'" + ")\">首页</a>";
            //console.log(firstPage);
            var before = data.currentPage - 1;
            if (before == 0){
                before = 1;
            }

            //展示 上一页 即 "＜"
            //var beforePage = template("before",{ftname:ftname,before:before,data:data,name:name});;
            var beforePage = "<a class = 'icon item' onclick = \"" + ftname + "(" + before + ",'" + data.tCase + "'" + ")\"><i\n" + "class = 'left chevron icon'></i></a>";
            var next = data.currentPage + 1;

            if (next >= data.totalPage){
                next = data.totalPage;
            }
            lis += firstPage;
            lis += beforePage;

            //展示 中间显示数字页码

            for (var j = start; j <= end; j++){
                //判断当前页码是否等于i
                //创建页码li
                var p;
                if (data.currentPage == j){
                    p = "<a class=\"active item\" onclick=\"" + ftname + "(" + j + ",'" + data.tCase + "'" + ")\">" + j + "</a>";
                }else{
                    p = "<a class=\"item\" onclick=\"" + ftname + "(" + j + ",'" + data.tCase + "'" + ")\">" + j + "</a>";
                }
                lis += p;
            }
            //展示 下一页 即"＞" 与 尾页
            //let html = template("hrefa",{ftname:ftname,next:next,data:data,name:name});
            var nextPage = "<a class = 'icon item' onclick = \"" + ftname + "(" + next + ",'" + data.tCase + "'" + ")\"><i\n" + "class = 'right chevron icon'></i></a>";
            var lastPage = "<a class=\"item\" onclick=\"" + ftname + "(" + data.totalPage + ",'" + data.tCase + "'" + ")\">尾页</a>";
            lis += nextPage;
            lis += lastPage;


            //展示数据表格信息
            var list = "";
            for (var i = 0; i < data.data.length; i++){
                var course = data.data[i];
                var tr = "<tr ";
                if(course.stock == 0){
                    tr += "class=\"error\"";
                    tr = tr + ">\n" + "<th>" + course.courseId + "</th>\n" + "<th>" + course.collegeName + "</th>\n" + "<th>" + course.courseName + "</th>\n" + "<th>" + course.teacher + "</th>\n" + "<th>" + course.type + "</th>\n" + "<th>" + course.courseScore + "</th>\n" + "<th>" + "已满人" + "</th>\n" + "<th>" + course.address + "</th>\n";
                }else{
                    if (course.stock <= 10 && course.stock > 0){
                        tr += "class=\"error\"";
                    }else if (course.stock > 10 && course.stock <= 25){
                        tr += "class=\"warning\"";
                    }
                    tr = tr + ">\n" + "<th>" + course.courseId + "</th>\n" + "<th>" + course.collegeName + "</th>\n" + "<th>" + course.courseName + "</th>\n" + "<th>" + course.teacher + "</th>\n" + "<th>" + course.type + "</th>\n" + "<th>" + course.courseScore + "</th>\n" + "<th>" + course.stock + "</th>\n" + "<th>" + course.address + "</th>\n";
                }
                tr += "<td><button  class = \"ui button\" " + ">" + "<i class = \"plus icon\"></i>无法操作</button></td>";

                tr += "</tr>\n";
                list += tr;
            }
            //改变内容
            $("#pageNum").html(lis);
            $("#tbody").html(list);
        }

        //填充表格用户数据!
        function fill(ftname,data){
            var back = "<span style = \"text-align: center\"><h3>学生信息如下</h3></span>";
            $("#back").html(back);
            var thead = "<tr>\n" + "                <th>id</th>\n" + "                <th>学生姓名</th>\n" + "                <th>学生账号</th>\n" + "                <th>学生专业</th>\n" + "                <th>学生角色</th>\n" + "                <th>操作</th>\n" + "            </tr>";
            $("#thead").html(thead);
            $("#pageNum").html("");
            $("#tbody").html("");
            //1.1展示总页码以及总记录数
            $("#totalPage").html(data.totalPage);
            $("#totalCount").html(data.totalCount);
            //console.log(ttCase);
            console.log("ftname:" + ftname);
            var start;
            var end;
            //要显示5个页码
            if (data.totalPage < 5){
                //不够10页
                start = 1;
                end = data.totalPage;
            }else{
                //实现前二后二效果
                start = data.currentPage - 2;
                end = data.currentPage + 2;
                if (start < 1){
                    start = 1;
                    end = start + 4;
                }

                if (end > data.totalPage){
                    end = data.totalPage;
                    start = end - 4;
                }
            }
            //1.2 展示分页页码 onclick="selectOrCancel(' + course.courseId + ',' + true + ')">' +
            var lis = "";
            //var firstPage = template("firstHref",{
            //    ftname:ftname,ttCase:ttCase,name:name,
            //}); //展示首页
            var firstPage = "<a class=\"item\" onclick=\"" + ftname + "(" + 1 + ",'" + data.tCase + "'" + ")\">首页</a>";
            //console.log(firstPage);
            var before = data.currentPage - 1;
            if (before == 0){
                before = 1;
            }

            //展示 上一页 即 "＜"
            //var beforePage = template("before",{ftname:ftname,before:before,data:data,name:name});;
            var beforePage = "<a class = 'icon item' onclick = \"" + ftname + "(" + before + ",'" + data.tCase + "'" + ")\"><i\n" + "class = 'left chevron icon'></i></a>";
            var next = data.currentPage + 1;

            if (next >= data.totalPage){
                next = data.totalPage;
            }
            lis += firstPage;
            lis += beforePage;

            //展示 中间显示数字页码

            for (var j = start; j <= end; j++){
                //判断当前页码是否等于i
                //创建页码li
                var p;
                if (data.currentPage == j){
                    p = "<a class=\"active item\" onclick=\"" + ftname + "(" + j + ",'" + data.tCase + "'" + ")\">" + j + "</a>";
                }else{
                    p = "<a class=\"item\" onclick=\"" + ftname + "(" + j + ",'" + data.tCase + "'" + ")\">" + j + "</a>";
                }
                lis += p;
            }
            //展示 下一页 即"＞" 与 尾页
            //let html = template("hrefa",{ftname:ftname,next:next,data:data,name:name});
            var nextPage = "<a class = 'icon item' onclick = \"" + ftname + "(" + next + ",'" + data.tCase + "'" + ")\"><i\n" + "class = 'right chevron icon'></i></a>";
            var lastPage = "<a class=\"item\" onclick=\"" + ftname + "(" + data.totalPage + ",'" + data.tCase + "'" + ")\">尾页</a>";
            lis += nextPage;
            lis += lastPage;


            //展示数据表格信息
            var list = "";
            for (var i = 0; i < data.data.length; i++){
                var user = data.data[i];
                var tr = "<tr ";
                tr = tr + ">\n" + "<th>" + user.userId + "</th>\n" + "<th>" + user.studentName + "</th>\n" + "<th>" + user.username + "</th>\n" + "<th>" + user.object + "</th>\n" + "<th>" + user.role + "</th>\n";

                //if (name == "admin"){
                //    tr += "<td><button  class = \"ui button\" " + ">" + "<i class = \"plus icon\"></i>无法选择</button></td>";
                //}else{
                //if (course.flag){
                //tr += "<td> <div class = \"ui animated fade button\" onclick=\"show('" + course.courseId + "','" + true + "','" + name + "','" + ftname + "','" + data.currentPage + "','" + data.tCase + "'" + ")\">" + "<div class = \"visible content\"><i class = \"check icon\"></i>已选</div>" + "<div  class = \"hidden content\"><i  class = \"genderless icon\"></i>退选</div>" + "</div></td>";
                //}else{
                tr += "<td><button id=\"select\" class = \"ui twitter button\" onclick=\"checkDetails('" + "1" + "','" + user.username + "','" + data.currentPage + "'" + ")\">" + "<i class = \"zoom-in icon\"></i>查看信息</button></td>";
                //}
                //}
                tr += "</tr>\n";
                list += tr;
            }
            //改变内容
            $("#pageNum").html(lis);
            $("#tbody").html(list);
        };

        //查看该学生选课信息
        function checkDetails(page,userAccount,backPage){
            var fnname = getFnName(arguments.callee,12);
            //console.log(fnname); //打印出来了
            console.log(userAccount);
            $.ajax({
                url:"/usercourse/studentInfo", // 请求路径
                type:"POST", //请求方式
                data:{"page":page,"limit":8,"username":userAccount}, //默认 每页8条数据。
                dataType:"json",//data:{"username":"jack","age":23}, //  方式二 推荐使用这种方式
                success:function(data){  //这里的data可以随便命名 不过还是有点规则好一些
                    fillCourses(fnname,data,backPage);
                },//响应成功后的回调函数
                error:function(){
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
            });
        }

        //获取函数名.
        var getFnName = function(callee,length){
            var _callee = callee.toString().replace(/[\s\?]*/g,""),comb = _callee.length >= 50?50:_callee.length;
            _callee = _callee.substring(8,8 + length);
            //console.log(_callee); //验证成功。
            return _callee;
        };


    </script>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            overflow: auto;
            margin: 0;
        }

        html {
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<!--主容器-->
<div class = "ui container" th:width = "1500px">

    <div class = "ui segment" id = "index-header-nav" th:fragment = "nav-menu">
        <div class = "ui secondary menu" sec:authorize = "isAuthenticated()">  <!--如果登录了 就展示相关信息-->
            <a class = "item" th:href = "@{/}">首页</a>
            <div class = "right menu" sec:authorize = "hasAuthority('student')">
                <div class = "right menu"> <!--展示相对于权限的东西-->
                    <a class = "item" href = "#">
                        <i class = "icon user"></i>
                        个人选课信息
                    </a>
                    <a class = "item">
                        欢迎你,<span id = "user" sec:authentication = "name"></span>
                    </a>
                    <a class = "item" href = "/logout">
                        <i class = "sign-out icon"></i>注销
                    </a>
                </div>
            </div>
            <div class = "right menu" sec:authorize = "hasAuthority('admin')">
                <div class = "right menu"> <!--展示相对于权限的东西-->
                    <a class="item" th:href="@{/courseManage}">
                        <i class="table icon"></i>
                        课程管理
                    </a>
                    <a class = "item" href = "/ExcelDownload">
                        <i class = "icon table"></i>
                        导出信息
                    </a>
                    <a class = "item" href = "#" onclick = "location.reload(true)">
                        <i class = "icon user"></i>
                        学生选课统计
                    </a>
                    <a class = "item">
                        欢迎你,<span id = "admin" sec:authentication = "name"></span>
                    </a>
                    <a class = "item" href = "/logout">
                        <i class = "sign-out icon"></i>注销
                    </a>
                </div>
            </div>

        </div>
    </div>
    <div class = "ui small test modal" id = "alertUI">
        <i class = "close icon"></i>
        <div class = "header">
            退选课程
        </div>
        <div class = "content">
            <p>你确定要退选课程吗？</p>
        </div>
        <div class = "actions">
            <div class = "ui negative button">
                取消
            </div>
            <div class = "ui positive button">
                确定
            </div>
        </div>
    </div>
    <div class = "ui small test modal" id = "alertMsg">
        <i class = "close icon"></i>
        <div class = "header">
            信息
        </div>
        <div class = "content">
            <p id = "msg"></p>
        </div>
        <div class = "actions">
            <div class = "ui positive button" onclick = "">
                确定
            </div>
        </div>
    </div>

    <div class = "ui segment" style = "text-align: center">
        <h3>网上在线选课系统</h3>
    </div>

    <div>
    </div>
    <div class = "ui segment">
        <div class = "left menu" id = "back">
            <!--<a class = "item" href = "#"><i class = "icon reply"></i>返回</a>-->
            <span style = "text-align: center"><h3>学生信息如下</h3></span>
        </div>
        <table class = "ui selectable celled table" id = "courseTable" style = "text-align: center">
            <thead id = "thead">
            <tr>
                <th>id</th>
                <th>学生姓名</th>
                <th>学生账号</th>
                <th>学生专业</th>
                <th>学生角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id = "tbody">
            <tr class = "error">
                <td>1</td>
                <td>test</td>
                <td>123123123</td>
                <td>student</td>
                <td>计算机科学与技术</td>
                <td>
                    <button class = "ui twitter button">
                        <i class = "plus icon"></i>
                        选择
                    </button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>test</td>
                <td>123123123</td>
                <td>student</td>
                <td>计算机科学与技术</td>
                <td>
                    <div class = "ui animated fade button" onclick = "selectOrCancel(1,null)">
                        <div class = "visible content">
                            <i class = "check icon"></i>
                            已选
                        </div>
                        <div class = "hidden content">
                            <i class = "genderless icon"></i>
                            退选
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan = "9">
                    共<i id = "totalPage">12</i>页,<i id = "totalCount">132</i>条数据
                    <div class = "ui right floated pagination menu" id = "pageNum">
                        <a class = "item">首页</a>
                        <a class = "icon item">
                            <i class = "left chevron icon"></i>
                        </a>
                        <a class = "item">1</a>
                        <a class = "item">2</a>
                        <a class = "item">3</a>
                        <a class = "item">4</a>
                        <a class = "icon item">
                            <i class = "right chevron icon"></i>
                        </a>
                        <a class = "item">尾页</a>
                    </div>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>

</div>
</body>
</html>